<template>
    <div>
        <basic-layout title="包间预定" :showFilterBtn="true" @handleAdd="handleAdd" @handleFilter="$refs.queryPopupRef.show = true">
            <div class="columnFlex">
                <!-- 列表 -->
                <van-row class="listCon">
                    <van-pull-refresh class="pullRefresh" v-model="refreshLoading" @refresh="onRefresh">
                        <van-list v-model="loading" :finished="finished" :finished-text="listData.length ? '没有更多了' : ''" @load="onLoad">
                            <van-swipe-cell v-for="val in listData" :key="val.bookeId">
                                <div class="cellContent" @click="handleDetail(val)">
                                    <div class="flexTit">
                                        <p class="title">
                                            {{ val.canteenName }}
                                            <a class="type" :class="'type' + val.mealsType">{{ val.mealsTypeName }}</a>
                                        </p>
                                        <p class="other">
                                            <span class="status" :class="'status' + val.reserveState">{{ val.reserveStateName }}</span>
                                        </p>
                                    </div>
                                    <div class="bottom">
                                        <p>
                                            <span class="label">包间名称：</span>
                                            {{ val.snugName }}
                                        </p>
                                        <div class="flex" v-if="val.reserveState === '3' || val.reserveState === '4'">
                                            <p>
                                                <span class="label">预定人数：</span>
                                                {{ val.bookeNum }} 人
                                            </p>
                                            <p>
                                                <span class="label">就餐日期：</span>
                                                {{ val.reserveTime }}
                                            </p>
                                        </div>
                                        <template v-else>
                                            <p>
                                                <span class="label">预定人数：</span>
                                                {{ val.bookeNum }} 人
                                            </p>
                                            <p>
                                                <span class="label">就餐日期：</span>
                                                {{ val.reserveTime }}
                                            </p>
                                        </template>
                                        <p v-if="val.reserveState === '3' || val.reserveState === '4'">
                                            <span class="label">取消原因：</span>
                                            {{ val.cancelReason }}
                                        </p>
                                        <div class="btn" v-if="val.reserveState === '2'">
                                            <van-button type="info" color="#f25454" plain size="mini" @click="handleCancel(val, $event)">取消预定</van-button>
                                        </div>
                                    </div>
                                </div>
                            </van-swipe-cell>
                        </van-list>
                        <van-empty v-if="!loading && !listData.length" class="custom-image" :image="require('../../../../assets/images/empty.png')" description="暂无数据" />
                    </van-pull-refresh>
                </van-row>
            </div>
        </basic-layout>
        <!-- 筛选条件弹出框 -->
        <queryPopup ref="queryPopupRef" @handleSearch="onRefresh" @handleReset="handleReset">
            <van-form class="filterBox">
                <label>食堂列表</label>
                <van-field>
                    <template #input>
                        <div class="textCon" @click="showPicker = true">
                            <span v-if="!canteenText" style="color: #aaa">请选择食堂列表</span>
                            <span v-else>{{ canteenText }}</span>
                        </div>
                    </template>
                </van-field>
                <label>就餐日期</label>
                <van-field>
                    <template #input>
                        <div class="textCon" @click="showTimePicker = true">
                            <span v-if="!formData.reserveTime" style="color: #aaa">请选择就餐日期</span>
                            <span v-else>{{ formData.reserveTime }}</span>
                        </div>
                    </template>
                    <template #button>
                        <van-icon v-if="formData.reserveTime" name="cross" @click="clearPicker()" />
                    </template>
                </van-field>
            </van-form>
        </queryPopup>
        <!-- 食堂列表选择 -->
        <van-action-sheet v-model="showPicker" cancel-text="取消" :actions="canteenList" @select="onConfirm" />
        <!-- 就餐日期 -->
        <van-calendar v-model="showTimePicker" @confirm="onTimeConfirm" />
        <!-- 新增/详情/编辑 弹出框 -->
        <fullscreenModal :modal="fullscreenModal" :isAdd="isAdd" label="包间预定" defaultBgColor="#eee" :isShowEdit="false" :editType="editType" @handleClose="fullscreenModal = false" @handleSave="$refs.editFormRef.handleSave()">
            <orderDetail v-show="editType == 'detail'" ref="orderDetailRef" @close="fullscreenModal = false" @refresh="onRefresh" />
            <edit-form v-show="editType == 'edit'" @close="fullscreenModal = false" @refresh="onRefresh" ref="editFormRef" />
        </fullscreenModal>
        <full-loading v-if="fullLoading"></full-loading>
        <!-- 取消原因 -->
        <van-dialog v-model="showCancelModal" title="取消原因" show-cancel-button :beforeClose="handleSure">
            <van-field v-model="cancelFormData.cancelReason" rows="5" type="textarea" maxlength="256" placeholder="请输入取消原因" show-word-limit />
        </van-dialog>
    </div>
</template>

<script>
    import { getCanteenInfoByLoginUser } from '@/api/srvAssurance/smarcatering/oneWeekMenu';
    import { getPageForSnugBookeInfo, editBookState } from "@/api/srvAssurance/smarcatering/roomOrder";
    import editForm from "./editForm.vue";
    import orderDetail from './orderDetail.vue';
    export default {
        components: { editForm, orderDetail },
        data () {
            return {
                loading: false,
                fullLoading: false,
                refreshLoading: false,
                fullscreenModal: false,
                showPicker: false,
                showTimePicker: false,
                showCancelModal: false,
                finished: false,
                formData: {
                    canteenId: '',
                    reserveTime: '',
                    pageNum: 1,
                    pageSize: 20
                },
                canteenText: "",
                listData: [], // 列表数据
                canteenList: [], // 食堂列表
                isAdd: false,
                editType: "",
                cancelFormData: {
                    bookeId: '', // 取消标识
                    cancelReason: '', // 取消原因
                }
            };
        },
        mounted () {
            this.queryDicData();
        },
        methods: {
            // 获取表格数据
            getListData () {
                if (!this.formData.canteenId) {
                    this.finished = true;
                    this.loading = false;
                    return;
                }
                this.loading = true;
                getPageForSnugBookeInfo(this.formData).then((res) => {
                    this.loading = false;
                    if (res.code === 1000 && res.data) {
                        this.listData = [...this.listData, ...res.data.records];
                        if (this.listData.length >= res.data.total) {
                            this.finished = true;
                        }
                    } else {
                        this.finished = true;
                    }
                }).catch(() => {
                    this.loading = false;
                    this.finished = true;
                });
            },
            onRefresh () {
                this.refreshLoading = false;
                this.finished = false;
                this.listData = [];
                this.formData.pageNum = 1;
                this.getListData();
            },
            onLoad () {
                this.formData.pageNum++;
                this.getListData();
            },
            // 重置
            handleReset () {
                this.formData = {
                    canteenId: '',
                    reserveTime: '',
                    pageNum: 1,
                    pageSize: 20
                };
                if (this.canteenList.length) {
                    this.formData.canteenId = this.canteenList[0].canteenId;
                    this.canteenText = this.canteenList[0].canteenName;
                }
                this.onRefresh();
            },
            // 食堂列表选择
            onConfirm (item) {
                this.formData.canteenId = item.canteenId;
                this.canteenText = item.name;
                this.showPicker = false;
                this.onRefresh();
            },
            // 就餐日期选择
            onTimeConfirm (time) {
                this.formData.reserveTime = new Date(time).format('yyyy-MM-dd');
                this.showTimePicker = false;
                this.onRefresh();
            },
            // 清空查询条件
            clearPicker () {
                this.formData.reserveTime = "";
                this.onRefresh();
            },
            // 新建数据
            handleAdd () {
                this.fullscreenModal = true;
                this.editType = "edit";
                this.isAdd = true;
                this.$refs.editFormRef.resetForm();
            },
            // 查看详情
            handleDetail (item) {
                this.fullscreenModal = true;
                this.editType = "detail";
                this.isAdd = false;
                this.$refs.orderDetailRef.handleDetail(item);
            },
            // 取消预定
            handleCancel (item, e) {
                e.stopPropagation();
                this.$Dialog
                    .confirm({
                        title: "是否确定取消？",
                    })
                    .then(() => {
                        this.cancelFormData = {
                            bookeId: item.bookeId,
                            cancelReason: ''
                        }
                        this.showCancelModal = true;
                    })
                    .catch(() => { });
            },
            // 确定取消
            handleSure (action, done) {
                if (action === 'confirm') {
                    done(false);
                    if (!this.cancelFormData.cancelReason) {
                        this.$Notify({ type: "warning", message: "请输入取消原因" });
                        return;
                    } else if (!this.$commonReg.textAreaReg.test(this.cancelFormData.cancelReason)) {
                        this.$Notify({ type: "warning", message: this.$commonReg.textAreaMsg });
                        return;
                    }
                    this.fullLoading = true;
                    editBookState(this.cancelFormData).then(res => {
                        this.fullLoading = false;
                        if (res.code === 1000) {
                            this.showCancelModal = false;
                            this.$Notify({ type: 'success', message: '取消成功！' });
                            this.onRefresh()
                        }
                    }).catch(() => {
                        this.fullLoading = false;
                    });
                } else {
                    done();
                }
            },
            // 下拉框数据
            queryDicData () {
                // 食堂列表
                getCanteenInfoByLoginUser().then(res => {
                    if (res.code === 1000 && res.data) {
                        res.data.forEach(item => {
                            item.name = item.canteenName;
                        })
                        this.canteenList = res.data;
                        if (this.canteenList.length) {
                            this.formData.canteenId = this.canteenList[0].canteenId;
                            this.canteenText = this.canteenList[0].canteenName;
                            this.onRefresh();
                        }
                        this.$nextTick(() => {
                            this.$refs.editFormRef.canteenList = this.canteenList;
                        })
                    }
                })
            }
        },
    };
</script>

<style scoped lang="less">
    .listCon {
        .cellContent {
            padding: 0;
            .flexTit {
                padding: 5px 10px;
                border-bottom: 1px solid #eee;
                box-sizing: border-box;
                .other {
                    text-align: right;
                    .status {
                        border-radius: 2px;
                        padding: 3px 6px;
                        color: green;
                    }
                    .status3 {
                        color: red;
                    }
                    .status4 {
                        color: red;
                    }
                }
                .type {
                    background: #f2a84e;
                    font-size: 9px;
                    color: #fff;
                    margin-left: 8px;
                    padding: 0 3px;
                    border-radius: 3px;
                }
                .type2 {
                    background: #4eb3e9;
                }
            }
            .bottom {
                padding: 10px;
                box-sizing: border-box;
                padding: relative;
                .btn {
                    position: absolute;
                    right: 10px;
                    bottom: 25px;
                    .van-button {
                        padding: 0 10px;
                        height: 30px;
                        line-height: 30px;
                        border-radius: 17px;
                        font-size: 13px;
                    }
                }
            }
        }
    }
</style>
